<template>
  <div>
    <!-- <el-table :data="list1" style="width: 80%;margin:0 auto;" border> -->
    <el-table :data="list1" style="width: 80%;margin:0 auto;" border :span-method="spanMethod1">
      <el-table-column prop="dosenCode" label="试剂">
      </el-table-column>
      <el-table-column prop="dosenName" label="车间">
      </el-table-column>
      <el-table-column v-for="(item,i) in monthName" :key="i" :prop="item" :label="item">
        <template slot-scope="scope">
          {{scope.row.data[i].planValue}}
        </template>
      </el-table-column>
    </el-table>
    <el-table :data="list" :span-method="spanMethod" style="width: 80%;margin:0 auto;">
      <el-table-column prop="ascriptionDate" label="日期">
      </el-table-column>
      <el-table-column prop="shiftName" label="班次">
      </el-table-column>
      <el-table-column prop="shiftId" label="班组">
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      obj: {},
      obj1: {},
      list1: [],
      monthName: []
    }
  },
  created () {
    fetch("./list.json").then(res => {
      return res.json()
    }).then(res => {
      // this.list = res;
      this.setNum(res)
    })
    fetch("./base.json").then(res => {
      return res.json()
    }).then(res => {
      this.setNull(res)
    })
  },
  mounted () {
    fetch("./vform2.json").then(res => {
      return res.json()
    }).then(res => {
      let num = res.cimsTherePlanApplySublistEntityList.length;
      res.cimsTherePlanApplySublistEntityList.map(item => {
        let keys = Object.keys(item);
        item.data.map(json => {
          json.applyTime = json.monthName;
          delete json.monthName;
          keys.map(e => {
            if (e != "data" && e != "applyTime" && e != "planValue") {
              json[e] = item[e]
            }
          })
          res.cimsTherePlanApplySublistEntityList.push(json)
        })
      })
      res.cimsTherePlanApplySublistEntityList = res.cimsTherePlanApplySublistEntityList.slice(num, res.cimsTherePlanApplySublistEntityList.length)
    })
    fetch("./vform3.json").then(res => {
      return res.json()
    }).then(res => {
      let arr = [], arr1 = [];
      res.map(item => {
        if (!arr.includes(item.dosenCode)) {
          arr.push(item.dosenCode)
          let obj = {
            dosenCode: item.dosenCode,
            dosenName: item.dosenName,
            list: res.filter(json => json.dosenCode == item.dosenCode)
          }
          arr1.push(obj)
        }
      })
      arr1.map(msg => {
        if (msg.list.length > 0) {
          let arr = [], totalArr = [];
          msg.list[0].data.map(item => {
            arr.push(item.monthName)
          })
          this.monthName = arr;
          arr.map(item => {
            let total = 0;
            msg.list.map(msg => {
              msg.data.map(e => {
                if (e.monthName == item) {
                  total += e.planValue
                }
              })
            })
            let obj = {
              monthName: item,
              planValue: total
            }
            totalArr.push(obj);
          })
          msg.list.push({
            data: totalArr,
            dosenCode: msg.dosenCode,
            dosenName: "统计"
          })
        }
      })
      let result = [];
      arr1.map(item => {
        item.list.map(e => {
          result.push(e)
        })
      })
      this.list1 = result;
      this.list1.map((item, i) => {
        var num = 0
        item.data.map(e => {
          num += e.planValue
          this.$set((this.list1[i].data)[0], 'planValue', num)
        })
      })
      this.setNum1(this.list1)
      // console.log(result)
    })
  },
  methods: {
    setNum (list) {
      let arr = [], indexArr = [], totalArr = [];
      list.map(item => {
        if (!arr.includes(item.ascriptionDate)) {
          arr.push(item.ascriptionDate)
          totalArr.push(list.filter(json => json.ascriptionDate == item.ascriptionDate))
        }
      })
      console.log(arr, 1234);
      console.log(totalArr, 4321);
      // list = [];
      // totalArr.map(item => {
      //   let total = 0
      //   item.map(msg => {
      //     total = total + msg.shiftId
      //   })
      //   let obj = {
      //     ascriptionDate: item[0].ascriptionDate,
      //     shiftName: "合计",
      //     shiftId: total
      //   }
      //   item.push(obj)
      //   list = [...list, ...item]
      // })
      console.log(list, 89075);
      this.list = list;
      arr.map(item => {
        indexArr.push(list.filter(json => json.ascriptionDate == item).length)
      })
      console.log(indexArr, 8765678);
      let num = 0;
      indexArr.map((item, index) => {
        if (index != 0) {
          num = num + indexArr[index - 1];
        }
        console.log(num, index, 'num');
        this.obj[num] = {
          rowspan: indexArr[index],
          colspan: 1
        }
      })
      console.log(this.obj, 987689);
    },
    setNum1 (list) {
      let arr = [], indexArr = [], totalArr = [];
      list.map(item => {
        if (!arr.includes(item.dosenCode)) {
          arr.push(item.dosenCode)
          totalArr.push(list.filter(json => json.dosenCode == item.dosenCode))
        }
      })
      this.list1 = list;
      // console.log(arr, 1);
      // console.log(totalArr, 2);
      arr.map(item => {
        indexArr.push(list.filter(json => json.dosenCode == item).length)
      })
      // console.log(indexArr, 3);
      let num = 0;
      indexArr.map((item, index) => {
        if (index != 0) {
          num = num + indexArr[index - 1];
        }
        // console.log(num, index, 45);
        this.obj1[num] = {
          rowspan: indexArr[index],
          colspan: 1
        }
      })
      // console.log(this.obj1);
    },
    spanMethod1 ({ rowIndex, columnIndex }) {
      // console.log(this.obj1[rowIndex], 123);
      // console.log(this.obj1, 45678);
      if (columnIndex == 0) {
        if (this.obj1[rowIndex]) {
          return this.obj1[rowIndex]
        } else {
          ''
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    spanMethod ({ rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        if (this.obj[rowIndex]) {
          return this.obj[rowIndex]
        } else {
          ''
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    setNull (arr) {
      arr.map(item => {
        if (item.children && item.children.length > 0) {
          this.setNull(item.children)
        } else {
          item.children = null;
        }
      })
    }

  },

}
</script>

<style>
</style>